<template>
  <el-dialog
      :close-on-click-modal="false"
      :visible="isShowAddNumDialog"
      :title="title"
      @close="$emit('close')"
      width="80%"
    >
    <el-table
        ref="table"
        :data="dataList"
        size="small"
        style="width: 100%;overflow-x: scroll;"
      >
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column label="条码" prop="barCode" align="center">
          <template slot-scope="scope">
           <div class="barCode">
            <el-image
              :src="
                baseUrl +
                '/api/barCode/showBarCode?id=' +
                scope.row.id +
                '&type=' +
                scope.row.type
              "
              style="height: 40px; vertical-align: middle"
              :preview-src-list="srcList"
              @click="enlargeBarcode(scope.row)"
            />
            <span>{{ scope.row.id }}</span>
           </div>
          </template>
        </el-table-column>
        <el-table-column label="级别" prop="grade" align="center">
          <template slot-scope="scope">
            <span :style="classObj(scope.row.grade)">
              {{ scope.row.grade }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="capacity" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.capacity }}</span>
            <span>{{
              scope.row.unit == 1 ? "L" : scope.row.unit == 2 ? "mL" : "g"
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="数量" prop="amount" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.amount }} 瓶</span>
          </template>
        </el-table-column>
        <el-table-column prop="labName" label="实验室" align="center" />
        <el-table-column prop="cabinetName" label="试剂柜" align="center" />
        <el-table-column
          prop="dangerClasses"
          width="155px"
          label="危险等级"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.dangerClasses == 1"
              >一般试剂(I)</el-tag
            >
            <el-tag v-if="scope.row.dangerClasses == 2">有机试剂(II)</el-tag>
            <el-tag type="danger" v-if="scope.row.dangerClasses == 3"
              >剧毒试剂/易致毒试剂(III)</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="入库时间" align="center" width="135"/>
        <el-table-column label="剩余量" prop="residue" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.residue }}</span>
            <span>{{
              scope.row.unit == 1 ||scope.row.unit == 2 ? "mL" : "g"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="actual"
          label="实际量"
          width="80px"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.actual"/>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page.page+1"
        :page-size="page.size"
        layout="total, prev, pager, next"
        :total="totalElements">
      </el-pagination>
      
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="$emit('close')">取消</el-button>
        <el-button
          type="primary"
          @click="panpingClick"
          >确认</el-button
        >
      </div>
    </el-dialog>
</template>

<script>
import {pankuAPI,getListAPI} from "@/api/hazardousChemicals";

export default {
  components: {
  },
  props:{
    // info:{
    //   type:Array,
    //   default: []
    // },
    isShowAddNumDialog:{
      type:Boolean,
      default:false
    },
    type:{
      type:Number
    },
    name:{
      type:String
    }
  },
  data () {
    return {
      title: '操作',
      page:{
        size:8,
        page:0
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      srcList: [], //预览图片列表
      dataList:[],
      totalElements:null
    }
  },
  computed: {
    classObj(grade) {
      return (grade) => {
        if (grade === "分析纯") {
          return { color: "#e94925" };
        } else if (grade === "化学纯") {
          return { color: "#1890ff" };
        } else if (grade === "基准试剂") {
          return { color: "lightgreen" };
        } else if (grade === "优级纯") {
          return { color: "#1da55a" };
        } else if (grade === "色谱纯") {
          return { color: "#1da55a" };
        } else if (grade === "其他") {
          return { color: "black" };
        }
      };
    },
  },
  created(){
    this.getList()
  },
  methods: {
    panpingClick(){
      pankuAPI(this.dataList).then((res)=>{
        this.$message.success(res)
        this.$emit('close')
        this.$emit('refresh')
      })
    },
    getList(){
      getListAPI({name:this.name,type:this.type,page:this.page.page,size:this.page.size}).then((res)=>{
        this.totalElements = res.totalElements
        this.dataList = res.content.map((item)=>({
          ...item,
          actual: ''
        }))
      })
    },
    handleCurrentChange(page){
      this.page.page = page -1
      this.getList()
    },
    enlargeBarcode(row) {
      var arr =
        this.baseUrl +
        "/api/barCode/showBarCode?id=" +
        row.id +
        "&type=" +
        row.type;
      this.srcList = arr.split(";");
    },
  }
}
</script>

<style scoped>

</style>
